<template>
  <div>
    <zm-dialog
      :title="TITLE"
      :visible.sync="value"
      append-to-body
      :before-close="dialogClose"
      :close-on-click-modal="false"
      size="large"
    >
      <zm-form :model="form" ref="searchForm" inline class="mt10">
        <zm-form-item prop="name">
          <zm-input
            class="w200"
            v-model="form.name"
            placeholder="请输入方案名称查询"
            clearable
          ></zm-input>
        </zm-form-item>
        <zm-form-item prop="id">
          <zm-input
            class="w200"
            v-model="form.id"
            placeholder="请输入ID查询"
            clearable
          ></zm-input>
        </zm-form-item>
        <zm-form-item>
          <zm-button t="search" @click="onSearch"></zm-button>
        </zm-form-item>
      </zm-form>

      <h4>
        已选择
        <span class="fc-blue">【{{ planName }}】</span>
      </h4>
      <zm-table-data
        ref="zm-table"
        :data="tableParams.data"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-page="true"
        pk="id"
        @selection-change="getSelectionIds"
      >
      </zm-table-data>
      <div slot="footer" class="tr">
        <zm-button @click="dialogClose" type="info">返回</zm-button>
        <zm-button @click="onSave" type="primary">保存</zm-button>
      </div>
    </zm-dialog>
    <!-- 特殊价格配置详情组件 -->
    <detail
      type="specialPrice"
      is-sold-product
      v-if="isShowDetail"
      v-model="isShowDetail"
      :id="detailID"
      @re-load="loadList"
      :is-show-btn="false"
    ></detail>
  </div>
</template>
<script>
import tableMixin from '@/mixins/zmTableMixin'
import dialogMixin from '@/mixins/dialogMixin'
import { columns } from './const'
import productProgramApis from '@/api/src/productProgram'
import Detail from '@/components/DetailContainer'

export default {
  name: 'ChoosePlan',
  components: { Detail },
  mixins: [dialogMixin, tableMixin],
  props: {
    params: {
      // 接口需要传的参数
      type: Object,
      default: () => {
        return {
          // exchangeRange: 'online', // 兑换范围
          // type: this.form.type // 业务类型
        }
      }
    },
    selected: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      radio: '',
      planName: '', // 已选方案名称
      form: {
        name: '',
        id: '',
        checkStatus: '5',
        type: this.params.type
      },
      isShowDetail: false,
      detailID: ''
    }
  },
  computed: {
    columns () {
      return columns(this)
    },
    exchangeRange () {
      return this.params.exchangeRange === 'online' ? '1' : '2'
    },
    TITLE () {
      return this.params.exchangeRange === 'online'
        ? '选择线上特殊节假日规则'
        : '选择线下特殊节假日规则'
    }
  },
  watch: {},
  created () {
    if (this.selected) {
      this.radio = this.selected
      this.init()
    }
  },
  methods: {
    async init () {
      const res = await productProgramApis.getPageList({
        id: this.selected,
        checkStatus: '5'
      })
      this.planName = res.list[0].name
    },
    async loadList () {
      const _res = await productProgramApis.getPageList(
        this.assignQuery({ ...this.form, exchangeRange: this.exchangeRange })
      )
      this.initialTableData(_res.list, _res.count)
      // if (this.selected) {
      //   const arr = _res.list.filter(i => i.id === this.selected)
      //   if (arr && arr.length > 0) {
      //     this.planName = arr[0].name
      //   }
      // }
    },
    handleChange (row) {
      this.planName = row.name
    },
    onSave () {
      if (!!this.radio === false) {
        this.$message.warning('请选择方案')
        return
      } else {
        this.$emit('handle-after', this.radio)
        this.dialogClose()
      }
    },
    // 查看详情
    checkDetail (row) {
      this.detailID = row.id
      this.isShowDetail = true
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
